<template>
  <div class="q-gutter-md" v-if="tag === 'button'">
    <q-btn
      :icon="pay.icon"
      :label="pay.label"
      :color="data.selected === pay ? pay.color : 'grey'"
      unelevated
      style="width: 160px"
      v-for="(pay, index) in data.list"
      :key="index"
      @click="data.selected = pay"
    />
  </div>
  <q-select
    v-model="data.selected"
    :options="data.list"
    option-value="name"
    label="支付方式"
    v-else
  />
</template>

<script>
import { defineComponent, onMounted, reactive, watch } from "vue";

export default defineComponent({
  name: "ComponentsPaymentTypesVue",
  props: {
    tag: {
      type: String,
      validator: (v) => ["select", "button"].indexOf(v) !== -1,
      default: "button",
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const data = reactive({
      list: [
        {
          label: "微信支付",
          name: "wechat",
          icon: "iconfont icon-weixinzhifu",
          color: "wechat",
        },
      ],
      selected: null,
    });

    onMounted(() => {
      data.selected = data.list[0];
    });

    watch(
      () => data.selected,
      (val) => emit("update:modelValue", val),
      { immediate: true }
    );
    return { data };
  },
});
</script>
